<template>
	<div id="app">
        <h1>父组件{{id}}</h1>
        <div>
        	<button @click="change">改变父组件的ID</button>
        	<button @click="addId">methods方法改变父组件的ID</button>
        </div>
        <children></children>
	</div>
</template>

<script>
	// 1、使用ref来保证provide和inject之间值的响应：
    import children from '@/components/children'
	import { ref, reactive,provide,getCurrentInstance } from 'vue'
	export default {
		name: 'app',
		data() {
			return {
				
			}
		},
		methods:{
			addId(){
				this.id++
			}
		},
		setup(props,context) {
            const { ctx } = getCurrentInstance();
            console.log(ctx.$root.$route)
			const id=ref(1082655)
			let change=()=>{
				id.value++
			}
            provide('id',id)
			return {
               id,
               change
			}
		},
		components:{
			children
		}
	}
</script>